<template>
    <div class="notification-page">
      <div v-if="showCreateNotification" class="create-notification">
        <h1>发布通知</h1>
        <div class="notification-form">
          <!-- 标题输入框 -->
          <label for="title">标题</label>
          <input
            type="text"
            id="title"
            v-model="title"
            placeholder="请输入标题，最多60个字符"
            maxlength="60"
          />
  
          <!-- 内容输入框 -->
          <label for="content">内容</label>
          <textarea
            id="content"
            v-model="content"
            placeholder="请输入内容，最多5000个字符"
            maxlength="5000"
          ></textarea>
  
          <!-- 发布方式 -->
          <div class="publish-mode">
            <label>
              <input
                type="radio"
                value="统一发布"
                v-model="publishMode"
              />
              统一发布
            </label>
            <label>
              <input
                type="radio"
                value="分班发布"
                v-model="publishMode"
              />
              分班发布
            </label>
          </div>
  
          <!-- 提交按钮 -->
          <button @click="submitNotification">提交</button>
          <button @click="cancelNotification">取消</button>
        </div>
      </div>
  
      <div v-else>
        <!-- 主页面内容 -->
        <div class="header-tabs">
          <button @click="switchTab('all')">全部通知</button>
          <button @click="switchTab('class')">分班发布</button>
          <button @click="switchTab('unified')">统一发布</button>
        </div>
  
        <component :is="currentTabComponent"></component>
  
        <!-- 新建通知按钮 -->
        <button class="new-notification" @click="showCreateNotification = true">
          新建通知
        </button>
      </div>
    </div>
  </template>
  
  <script>
  import AllNotifications from "./AllNotifications.vue";
  import ClassNotifications from "./ClassNotifications.vue";
  import UnifiedNotifications from "./UnifiedNotifications.vue";
  
  export default {
    components: {
      AllNotifications,
      ClassNotifications,
      UnifiedNotifications,
    },
    data() {
      return {
        showCreateNotification: false, // 是否显示新建通知界面
        activeTab: "all", // 当前选中的标签
        title: "", // 标题
        content: "", // 内容
        publishMode: "统一发布", // 发布方式
      };
    },
    computed: {
      currentTabComponent() {
        // 动态切换页面内容
        switch (this.activeTab) {
          case "class":
            return "ClassNotifications";
          case "unified":
            return "UnifiedNotifications";
          default:
            return "AllNotifications";
        }
      },
    },
    methods: {
      switchTab(tab) {
        this.activeTab = tab;
      },
      submitNotification() {
        if (!this.title || !this.content) {
          alert("标题和内容不能为空！");
          return;
        }
        console.log("提交通知数据：", {
          title: this.title,
          content: this.content,
          publishMode: this.publishMode,
        });
        alert("通知已提交！");
        // 清空表单
        this.title = "";
        this.content = "";
        this.publishMode = "统一发布";
        this.showCreateNotification = false;
      },
      cancelNotification() {
        this.showCreateNotification = false;
      },
    },
  };
  </script>
  
  <style scoped>
  .notification-page {
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  
  .header-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
  }
  
  .header-tabs button {
    padding: 10px 20px;
    border: none;
    background: #007bff;
    cursor: pointer;
  }
  
  .header-tabs button:hover {
    background: #0056b3;
  }
  
  .new-notification {
    position: fixed;
    margin-top: 20px;
    right: 20px;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .new-notification:hover {
    background-color: #0056b3;
  }
  
  .notification-form {
    max-width: 600px;
    margin: auto;
  }
  
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
  }
  
  input,
  textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
  }
  
  textarea {
    height: 150px;
    resize: none;
  }
  
  .publish-mode {
    margin-bottom: 20px;
  }
  
  button {
    background-color: #007bff;
    color: white;
    border: 1px;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  </style>